<script setup lang="ts">
const lineOption = computed(() => {
  return {
    legend: {
      show: false,
    },
    visualMap: {
      show: false,
      dimension: 0,
      pieces: [
        {
          lte: 8,
          color: 'green',
        },
        {
          gt: 8,
          lte: 12,
          color: 'red',
        },
        {
          gt: 12,
          lte: 19,
          color: 'orange',
        },
        {
          gt: 19,
          lte: 24,
          color: 'blue',
        },
      ],
    },
    series: [
      {
        seriesLayoutBy: 'row',
        type: 'line',
        smooth: true,
        symbolSize: 4,
        yAxisIndex: 0,
        name: '数据值',
      },
    ],
  }
})
const xData = Array(24).fill(1).map((_v, i) => {
  return `${String(i).padStart(2, '0')}:00`
})
const yData = Array(24).fill(1).map(() => {
  return (Math.random() * 100 + 50).toFixed(2)
})
const dataset = shallowReactive({
  source: [
    xData,
    yData,
  ],
})
</script>

<template>
  <div class="width-fill height-fill flex-direction flex">
    <slot name="title" />
    <BScrollbar>
      <ViewChartLine :mark-line="[]" :option="lineOption" :dataset="dataset" />
    </BScrollbar>
  </div>
</template>
